<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">
        订阅池<i class="el-icon-loading" v-if="loading"></i><br>
        <span class="tips">
          订阅池是所有用户添加的自己感兴趣的精选股票，票不在多，在于精，每多添加一只，就会大量消耗服务器算力成本。
        </span>
      </span>
      <el-button v-if="hasPerm('stock:pool:edit')" size="small" type="primary" @click="centerDialogVisible = true">添加订阅</el-button>
    </div>
    <div class="common-bot" v-if="tableData.length && hasPerm('stock:pool:list')">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="股票名称" width="260" fixed>
          <template slot-scope="scope">
              <span title="昨日涨幅" v-if="yesterday.hasOwnProperty(scope.row.code)"
                    :class="{word_red:yesterday[scope.row.code].riseRatio>0, word_green:yesterday[scope.row.code].riseRatio<0}">
                {{ yesterday[scope.row.code].riseRatio }}%
              </span>
            <el-link :href="`https://quote.eastmoney.com/concept2/${scope.row.code}.html`" target="_blank">
              <b>{{ scope.row.name }}</b>
            </el-link>
            ({{ scope.row.code }})
            <span title="今日涨幅" :class="{word_red:scope.row.info.riseRatio>0, word_green:scope.row.info.riseRatio<0}">
                {{ scope.row.info.riseRatio }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="info.section" label="版块"/>
        <el-table-column prop="datetime" label="收录日期"/>
        <el-table-column prop="price" label="收录价"/>
        <el-table-column prop="info.now" label="收盘价/涨幅" width="150">
          <template slot-scope="scope">
            {{ scope.row.info.now }}
            <span title="今日涨幅" :class="{word_red:scope.row.currentProfitRatio>0, word_green:scope.row.currentProfitRatio<0}">
                {{ scope.row.currentProfitRatio }} %
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="info.pe" label="市盈率"/>
        <el-table-column prop="turnoverRatio" label="换手率/MAX" width="120">
          <template slot-scope="scope">
            <span :class="{word_red_b:scope.row.info.active}">
            {{ scope.row.info.turnoverRatio }} / {{ scope.row.info.maxTurnoverRatio }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="info.maxVolumeRatio" label="量倍率"/>
        <el-table-column prop="stopLoss" label="止损位/幅度" width="120">
          <template slot-scope="scope">
            <span v-if="yesterday[scope.row.code]">
            {{ yesterday[scope.row.code].stopLoss }}({{scope.row.stopLossExtent}}%)
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="AI评分"/>
        <el-table-column prop="operateCount" label="操作次数"/>
        <el-table-column prop="profitRatio" label="盈利比例">
          <template slot-scope="scope">
            <span title="盈利比例" :class="{word_red:scope.row.profitRatio>0, word_green:scope.row.profitRatio<0}">
                {{ scope.row.profitRatio }} %
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="turnoverRatio" label="时长">
          <template slot-scope="scope">
            运行{{ scope.row.days }}天
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="yesterday[scope.row.code] && yesterday[scope.row.code].status">
              {{ yesterday[scope.row.code].status.text }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="添加股友"/>
        <el-table-column
          prop="actions"
          label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-link class="left3px" type="primary" @click.stop="doModify('edit', scope.row)">
              订阅
            </el-link>
            <el-link class="left3px" type="danger" @click.stop="del(scope.row)" v-if="hasPerm('stock:pool:del')">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" v-if="tableData.length">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"></el-pagination>
      </div>
    </div>
    <el-empty style="margin-top: 200px" description="订阅池中还未产生一只股票，您可以自行添加订阅" v-if="!tableData.length && !loading">
    </el-empty>

    <el-dialog
      title="添加或编辑订阅股票"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
      @closed="editHide"
      width="50%" top="15vh">
      <el-form :model="form" label-width="100px">
        <el-form-item label="股票代码">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editHide">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";

export default {
  components: {Briefly},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      showPage: false,
      tableData: [],
      enable: 0,
      keyword: "",
      limit: 14,
      nowPage: 1,
      roleGroupId: 0,
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      loading: false,
      yesterday: {},
      centerDialogVisible: false,
      form: {
        formId: null,
        code: null
      }
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
  },
  methods: {
    del(row) {
      this.$confirm('此操作将把这只股票移出订阅池, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Api.stockPool.del({targetIds: [row.id]}).then(res => {
          this.$message.success("操作成功");
          this.getData();
        })
      })
    },
    close() {
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    getData() {
      this.loading = true;
      Api.stockPool.list({
        limit: this.limit,
        page: this.nowPage - 1
      }).then((res) => {
        this.tableData = res.data;
        this.totalElement = res.total;
        this.yesterday = res.extra.yesterday;
        this.showPage = true;
        this.loading = false;
      }).catch(e => this.loading = false);
    },
    editHide() {
      this.centerDialogVisible = false
      this.form = {
        formId: null,
        code: null
      }
    },
    submit() {
      Api.stockPool.modify(this.form).then(res => {
        this.getData()
        this.editHide()
      })
    }
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
.left3px {
  margin-left: 3px;
}

.word_red {
  font-style: italic;
  font-size: 14px;
  color: red;
}

.word_green {
  font-style: italic;
  font-size: 14px;
  color: green;
}
</style>
